<page-header [title]="l('Books')" [desc]="l('书籍列表内容')"></page-header>

<nz-card [nzBordered]='false'>
  <div class="mb-md">

    <nz-row nzGutter="8">
      <nz-col nzSpan="24">
        <nz-form-item>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixSearch">
              <input nz-input [(ngModel)]="filterText" name="filterText" (keyup.enter)="refresh()" placeholder="模糊搜索找我">
              <ng-template #suffixSearch>
                <button nz-button (click)="refresh()" nzType="primary" nzSearch type="submit">
                  <i class="anticon anticon-search"></i>
                </button>
              </ng-template>
            </nz-input-group>

          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

  </div>

  <div class="mb-md">
    <nz-row nzGutter="8">
      <nz-col nzSm="12" nzMd="20" class="btn-gutter">
        <button (click)="createOrEdit()" nzType="primary" nz-button>
          <i class="anticon anticon-plus"></i>
          <span>{{l('Create')}}</span>
        </button>
        <button (click)="barchDelete()" nz-button nzType="danger">
          <i class="anticon anticon-delete"></i>
          <span>{{l('BarchDelete')}}</span>
        </button>
      </nz-col>
    </nz-row>
  </div>

  <div class="mb-md">
    <nz-row nzGutter="8">
      <nz-alert [nzType]="info" [nzMessage]="message" [nzShowIcon]="true">
        <ng-template #message>
          <span [innerHTML]="l('GirdSelectedXItemsTips',selectedDataItems.length)"></span>
          <a (click)="restCheckStatus(dataList)" class="ml-md">
            {{l('ClearEmpty')}}
          </a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="refresh()">{{l('Refresh')}}</a>
        </ng-template>

      </nz-alert>

    </nz-row>
  </div>

  <nz-row class="my-md">
    <nz-table #ajaxTable [nzData]="dataList" [(nzPageSize)]="pageSize" [(nzPageIndex)]="pageNumber" [nzTotal]="totalItems"
      [nzLoading]="isTableLoading" (nzPageIndexChange)="pageNumberChange()" (nzPageSizeChange)="refresh()"
      [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzNoResult]="noDataTemplate" [nzShowTotal]="showTotalTemplate"
      [nzFrontPagination]="false">
      <!--暂无数据组件-->
      <ng-template #noDateTemplate>
        <no-data></no-data>
      </ng-template>
      <ng-template #showTotalTemplate let-total let-range="range">
        {{l('GridFooterDisplayText',pageNumber,totalPages,total,range[0],range[1])}}
      </ng-template>
      <!--表头-->
      <thead (nzSortChange)="gridSort($event)">
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckBoxDisabled" [nzIndeterminate]="checkboxIndeterminate"
            (nzCheckedChange)="checkAll($event)"></th>
          <th nz-th nzShowSort nzSortKey="ImageUrl" nzWidth="100px">
            <span>{{l("ImageUrl")}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="BookName" nzWidth="100px">
            <span>{{l("BookName")}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="BookAuthor" nzWidth="100px">
            <span>{{l("BookAuthor")}}</span>
          </th>
          <th nz-th nzShowSort nzSortKey="BookIntro" nzWidth="100px">
            <span>{{l("BookIntro")}}</span>
          </th>
          <th nzWidth="100px" class="text-center">
            <span>{{l("Actions")}}</span>
          </th>
        </tr>
      </thead>
      <!--表格内容-->
      <tbody>
        <tr *ngFor="let item of ajaxTable.data">
          <!--全选框-->
          <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)='refreshCheckStatus(dataList)'></td>
          <td>
            <img [src]=item.imageUrl>
          </td>
          <td>
            <span nz-tooltip [nzTitle]="item.bookName">
              {{item.bookName}}
            </span>
          </td>
          <td>
            <span nz-tooltip [nzTitle]="item.bookAuthor">
              {{item.bookAuthor}}
            </span>
          </td>
          <td>
            <span nz-tooltip [nzTitle]="item.bookIntro">
              {{item.bookIntro}}
            </span>
          </td>
          <td>
            <ng-container>
              <a (click)="createOrEdit(item.id)">
                <i class="anticon anticon-edit mr-sm"></i>
                <span>{{l("Edit")}}</span>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <ng-container>
              <nz-popconfirm nzTitle="确定吗？" (nzOnConfirm)="delete(item)" nzOkText="确定" nzCancelText="取消">
                <a nz-popconfirm>
                  <i class="anticon anticon-delete mr-sm"></i>
                  <span>{{l("Delete")}}</span></a>
              </nz-popconfirm>

            </ng-container>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-row>


</nz-card>
